<template>
  <div class="user-info-box">
    <h3 class="h-title">账户信息</h3>
    <div class="candy-card">
      <h4>
        <span class="title">购买产品使用情况</span>
        <el-progress
          class="dead-line candy-progress"
          :show-text="false"
          :percentage="percent"
          :stroke-width="height"
        ></el-progress>
        <span class="text">剩余:{{ days }}天</span>
      </h4>
      <table-data
        :tableData="tableData"
        :columns="columns"
        :pagination="{ show: false }"
      >
        <el-table-column slot="hasPriceProp" label="价格分析">
          <template slot-scope="{ row }">
            <i v-if="row.hasPriceProp === 1" class="el-icon-success"></i>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column slot="hasOtherProp" label="属性分析">
          <template slot-scope="{ row }">
            <i v-if="row.hasOtherProp === 1" class="el-icon-success"></i>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </table-data>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import TableData from '@/components/TableData';

export default {
  name: 'UserInfo',
  components: { TableData },
  data() {
    return {
      columns: [
        { label: '账户', prop: 'phone' },
        { label: '到期时间', prop: 'deadLine' },
        { label: '品牌监控数', prop: 'brandCount' },
        { label: '店铺监控数', prop: 'shopCount' },
        { label: '宝贝监控数', prop: 'brandCount' },
        { slot: 'hasPriceProp', label: '价格分析', prop: 'sellMoneyPercent' },
        { slot: 'hasOtherProp', label: '属性分析', prop: 'sellMoneyPercent' },
        { label: '排行榜单个数', prop: 'rankingNumber' }
      ]
    };
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      suser: 'user/suser'
    }),
    tableData() {
      const user = Object.assign({}, this.user);
      user.phone = this.suser.phone;
      return [user];
    },
    days() {
      return parseInt(
        (new Date(this.user.deadLine.replace(/-/g, '/')).getTime() -
          new Date().getTime()) /
          24 /
          60 /
          60 /
          1000
      );
    },
    percent() {
      return (this.days / 365) * 100;
    },
    height() {
      return Math.ceil(document.body.clientHeight / 1920) * 15;
    }
  }
};
</script>
<style lang="less" scoped>
.user-info-box {
  h4 {
    .title {
      font-size: 0.16rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      padding-right: 0.1rem;
    }
    .dead-line {
      width: 4.8rem;
      display: inline-block;
      vertical-align: middle;
    }
    .text {
      padding-left: 0.31;
      font-size: 0.16;
      font-weight: 500;
      color: rgba(62, 124, 251, 1);
    }
    margin-bottom: 0.4;
  }
  .el-icon-success {
    color: #3ead80;
  }
}
</style>
